﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<style>
html{height:100%}
body{height:100%;margin:0;font-size:12px;background:url(../S01/CHS/image/bg.jpg) #4a2d70 top repeat-x fixed}

a{text-decoration:none}

a:active,dt:active,dt:focus{border:0;outline:0}


.frame1{position:relative;margin:0 auto;width:96%;height:100%}
.frame2{width:100%;height:100%}

.menu{position:absolute;left:0;bottom:0;margin:0;width:100%;overflow:hidden;text-align:center;background:url(../S01/CHS/image/menu.png) transparent}
.menu dt{float:left;width:8%;height:21px;cursor:pointer}
.menu dt.prev{background:url(../S01/CHS/image/prev.png) center no-repeat}
.menu dt.next{background:url(../S01/CHS/image/next.png) center no-repeat}
.menu dd{float:left;position:relative;margin:0;width:84%;overflow:hidden}
.menu dd ul{list-style:none;margin:0;padding:0}
.menu dd li{display:none}/*为避免闪烁，先隐藏*/
.menu dd a{float:left;margin:0 2%;padding:3% 0 0;width:21%;line-height:25px;color:#fff;font-size:12px}
.menu dd span{display:block}
.menu dd img{max-width:100%}
</style>
<title>t</title>
</head>
<body>
<div class="frame1">
	<div class="frame2">
		<a href="" onFocus="this.blur()" style="display:block;margin:0 auto 0;width:200px;height:50px;font-size:18px">首页</a>
	</div>
	
	<dl class="menu">
		<dt class="prev">&lt;</dt>
		<dd>
			<ul class="slides">
				<li>
					<a href=""><img src="../S01/CHS/image/icon1.png" alt="alicms"><span>网站首页</span></a>
					<a href=""><img src="../S01/CHS/image/icon1.png" alt="alicms"><span>关于我们</span></a>
					<a href=""><img src="../S01/CHS/image/icon1.png" alt="alicms"><span>公司产品</span></a>
					<a href=""><img src="../S01/CHS/image/icon1.png" alt="alicms"><span>联系我们</span></a>
				</li>
				<li>
					<a href=""><img src="../S01/CHS/image/icon1.png" alt="alicms"><span>其他栏目</span></a>
					<a href=""><img src="../S01/CHS/image/icon1.png" alt="alicms"><span>更多栏目</span></a>
					<a href=""><img src="../S01/CHS/image/icon1.png" alt="alicms"><span>其他栏目</span></a>
					<a href=""><img src="../S01/CHS/image/icon1.png" alt="alicms"><span>更多栏目</span></a>
				</li>
			</ul>
		</dd>
		<dt class="next">&gt;</dt>
	</dl>
</div>
<script src="/common/jquery/core.js"></script>
<script src="test/js/jquery.flexslider.js"></script>
<script>
$('.menu dd').flexslider(
{
	animation: 'slide',
	directionNav: false, <!--Set this to false if you want to remove the arrows navigation of the menu-->
	animationLoop: false,
	controlNav: false, 
	slideshow: false,
	animationDuration: 300
});

//设置菜单相关尺寸
//$('.menu dt').height($('.menu dd').height());

	// Hide the address bar!
//	window.scrollTo(0, 1);

/*
//设置菜单相关尺寸
$('.menu ul').children().width($('.menu dd').width());
$('.menu ul').width($('.menu ul').children().width() * $('.menu ul').children().length);
$('.menu dt').height($('.menu dd').height());

//菜单左右滑动
var ul = $('.menu ul');
$('.menu .prev').click(function()
{
	var w = ul.width(),
		l = ul.position().left,
		step = ul.children().outerWidth() * 1;
	
	if (w + l > step)
	{
		$('.menu ul').animate({left: l - step});
		$('.menu .next').css('visibility', 'visible');
		
		if (w + (l - step) <= step)
			$(this).css('visibility', 'hidden');
	}
});
$('.menu .next').click(function()
{
	var w = ul.width(),
		l = ul.position().left,
		step = ul.children().outerWidth() * 1;
	
	if (l < 0)
	{
		$('.menu ul').animate({left: l + step});
		$('.menu .prev').css('visibility', 'visible');
		
		if (l + step >= 0)
			$(this).css('visibility', 'hidden');
	}
});
*/
</script>
</body>
</html>
